/*
 * @Author: yxfan
 * @Date: 2024-10-11 10:18:32
 * @LastEditTime: 2024-10-22 17:54:15
 * @FilePath: /umi-demo/src/pages/demo/Diff2html/index.jsx
 * @Description:
 */
import { useEffect } from 'react';
import 'diff2html/bundles/css/diff2html.min.css';
import { createPatch } from 'diff';
import { html, parse } from 'diff2html';
import { Diff2HtmlUI } from 'diff2html/lib-esm/ui/js/diff2html-ui';
import './index.less';
import newStr from './newStr';
import oldStr from './oldStr';

export default () => {
    useEffect(() => {
        const diffStr = createPatch('1', oldStr, newStr, undefined, undefined, {
            // context: 100,
        });

        render(diffStr);
    }, []);

    function render(diffStr) {
        const targetElement = document.getElementById('container');
        const configuration = {
            drawFileList: false,
            // matching: 'lines',
            matching: 'none',
            highlight: true,
            // 显示差异级别，字符
            diffStyle: 'char',
            outputFormat: 'side-by-side',
            fileListToggle: false,
            diffMaxLineLength: 200,
            renderNothingWhenEmpty: false,
        };
        const diffJson = parse(diffStr);

        const diffHtml = html(diffStr, configuration);

        const diff2htmlUi = new Diff2HtmlUI(
            targetElement,
            diffStr,
            // [diffJson[0]],
            configuration,
        );
        diff2htmlUi.draw(); //绘制页面
        diff2htmlUi.highlightCode(); // 高亮数据
        diff2htmlUi.fileListToggle(true); // 是否折叠概要
    }

    return (
        <div
            className="demo-diff-html"
            style={{ height: 200, overflow: 'auto' }}
        >
            <div id="container"></div>
        </div>
    );
};
